<template>
  <div>
    <footer>
      <div class="container">
        <div class="top">
          <ul class="clearfix">
            <li>
              <div class="name">关于我们</div>
              <router-link to="/aboutus" class="bl text">关于Juju</router-link>
              <router-link to="/eventrelease" class="bl text">帮助中心</router-link>
              <router-link to="/qa" class="bl text">常见问题</router-link>
            </li>
            <li>
              <div class="name">活动&团队</div>
              <router-link to="/bidu" class="bl text">办活动前必读</router-link>
              <router-link to="/dashboard" class="bl text"
                >发布/管理活动</router-link
              >
              <router-link to="/create" target="_blank" class="bl text">创建团队</router-link>
              <router-link to="/stroylist" class="bl text"
                >有趣的故事</router-link
              >
            </li>
            <li>
              <div class="name">会员中心</div>
              <div class="text" v-if="!token">
                <router-link to="/login">登录</router-link>/<router-link
                  to="/register"
                  >注册</router-link
                >
              </div>
              <router-link to="/yhzcxy" class="bl text">用户协议</router-link>
              <router-link to="/reportcenter" class="bl text"
                >举报中心</router-link
              >
            </li>
            <li>
              <div class="name">联系我们</div>
              <div class="bl text">客服电话</div>
              <div class="bl text c">400-820-8820</div>
              <div class="bl text">周一到周日(09:00-21:00)</div>
            </li>
            <li>
              <div class="name">关注我们</div>
              <ul class="clearfix">
                <li><i class="iconfont icon-facebook"></i></li>
                <li><i class="iconfont icon-twitter-fill"></i></li>
                <li><i class="iconfont icon-lingying"></i></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="bot">
        <div class="container">
          <div class="text ta">
            版权所有:JujuTechnologies LLCICP证京B2-20180942 Jujuamici.com All
            Rights Reserved.
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: ''
    };
  },
  methods: {},
  mounted() {
    this.token = window.localStorage.getItem("token");
  }
};
</script>

<style lang="less" scoped>
footer {
  background-color: #3c3c3c;
}

footer .top {
  padding: 3.3125rem 0 3.125rem;
}

footer .top .name {
  font-size: 1rem;
  line-height: 1.875rem;
  color: #7f7f7f;
  margin-bottom: 1.25rem;
}

footer .top .text {
  font-size: 0.875rem;
  line-height: 1.625rem;
  color: #7f7f7f;
}

footer .top .text a {
  color: #7f7f7f;
}

footer .top .c.text {
  color: #19a15f !important;
}

footer .top a:hover {
  color: #19a15f;
}

footer .top > ul > li {
  width: 22%;
  float: left;
}

footer .top > ul > li:last-child {
  float: right;
  width: 12%;
}

footer .top li ul li {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #19a15f;
  border-radius: 50%;
  line-height: 2.5rem;
  text-align: center;
  float: left;
  margin-left: 0.8125rem;
}

footer .top li ul li i {
  color: #fff;
  font-size: 1.25rem;
}

footer .top li ul li:hover {
  background: #de5044;
}

footer .bot {
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

footer .bot .text {
  font-size: 0.875rem;
  line-height: 1.625rem;
  color: #7f7f7f;
}
footer .top > ul > li {
  width: 20%;
}
footer .top > ul > li:last-child {
  width: 15%;
}

@media (max-width: 990px) {
  footer .top > ul > li {
    width: 20%;
  }
  footer .top > ul > li:last-child {
    width: 20%;
  }
}
@media (max-width: 767px)  {
  footer>.container{
    display: none;
  }
}
</style>
